<template>
  <head class="main-header">
    <video 
      autoplay 
      loop 
      muted 
      poster="../assets/images/layout-header.webp"
      playsInline 
      data-wf-ignore="true" 
      data-object-fit="cover"
    >
      <source 
        :src="bannerVideoOgg"
        type="video/ogg" 
        data-wf-ignore="true"
      />
      <source 
        :src="bannerVideoMp4"
        type="video/mp4" 
        data-wf-ignore="true"
      />
      Your browser does not support the video tag.
    </video>
    <a class="logo" href="" title="brush logo">
      <img src="../assets/images/logo.webp" alt="">
    </a>
  </head>
</template>

<script>
import bannerVideoMp4 from '../assets/video/layout-header.mp4'
import bannerVideoOgg from '../assets/video/layout-header.ogg'

export default {
  name: 'Header',
  data() {
    return {
      bannerVideoMp4,
      bannerVideoOgg
    }
  }
}
</script>

<style lang="less" scoped>
.main-header {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
  min-width: 1000px;
  min-height: 155px;
  height: 9.375vw;
  max-height: 240px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgb(0 0 0 / 8%);

  video {
    position: absolute;
    z-index: 1;
    top: 40%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    image-rendering: pixelated;
  }

  .logo {
    position: absolute;
    z-index: 2;
    top: 50px;
    left: 100px;
    width: 100px;
    height: 103px;

    img {
      width: 50%;
      border-radius: 12px;
    }
  }
}
</style>